<template>
  <view class="container">
    <view class="header">
      <text class="title">收货地址</text>
      <button class="new-btn" @click="navigateToAdd">新建</button>
    </view>
    <view class="address-list">
      <view class="address-item" v-for="address in filteredAddresses" :key="address._id">
        <view class="address-info">
          <view class="name-phone">
            <text class="name">{{address.name}}</text>
            <text class="phone">{{address.phone}}</text>
          </view>
          <text class="address-detail">{{address.city}} {{address.department}} {{address.houseNumber}}</text>
        </view>
        <view class="btn-group">
          <image class="edit-logo" :src="require('../../static/icons/bianji.png')" @click="navigateToEdit(address._id)" mode="aspectFit"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      addresses: [],
      currentUserId: null,
      filteredAddresses: []
    };
  },
  onLoad() {
    this.getCurrentUserId();
  },
  methods: {
    async getCurrentUserId() {
      try {
        const response = await axios.get('http://localhost:3000/people');
        const users = response.data;
        const loggedInUser = users.find(user => user.isLoggedIn);
        if (loggedInUser) {
          this.currentUserId = loggedInUser.userId;
          this.getAddresses();
        } else {
          console.error('用户未登录');
        }
      } catch (error) {
        console.error('获取用户信息失败:', error);
      }
    },
    async getAddresses() {
      try {
        const response = await axios.get('http://localhost:3000/address');
        this.addresses = response.data;
        // 筛选出当前用户的地址
        this.filteredAddresses = this.addresses.filter(address => address.userId === this.currentUserId);
      } catch (error) {
        console.error('获取地址数据失败:', error);
      }
    },
    navigateToEdit(id) {
      uni.navigateTo({
        url: `/pages/address/addressupdate?id=${id}`
      });
    },
    navigateToAdd() {
      uni.navigateTo({
        url: '/pages/address/addressadd'
      });
    }
  }
};
</script>

<style scoped>
page{
     background-color: #f8f8f8;
}
/* 全局样式 */
.container {
  padding: 40rpx;
  background-color: #f8f9fa;
  border-radius: 20rpx;
  margin: 50rpx auto;
  max-width: 50%;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.container:hover {
  box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.15);
}

/* 头部样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background-color: #ffffff;
  border-radius: 15rpx;
  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 40rpx;
}

.title {
  font-size: 46rpx;
  font-weight: bold;
  color: #212529;
  text-shadow: 0 2rpx 2rpx rgba(0, 0, 0, 0.1);
}

.new-btn {
  background-color: #4aa4f3;
  color: white;
  padding: 20rpx 40rpx;
  border-radius: 12rpx;
  font-size: 34rpx;
  transition: background-color 0.3s ease, transform 0.3s ease;
  margin-right: unset;
}

.new-btn:hover {
  background-color: #4aa4f3;
  transform: scale(1.05);
}

/* 地址列表样式 */
.address-list {
  margin-top: 30rpx;
}

.address-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1rpx solid #dee2e6;
  padding: 30rpx;
  margin-bottom: 30rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.address-item:hover {
  transform: translateY(-8rpx);
}

.address-info {
  flex: 1;
}

.name-phone {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.name {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  margin-right: 30rpx;
}

.phone {
  font-size: 36rpx;
  color: #666;
}

.address-detail {
  font-size: 36rpx;
  color: #666;
  margin-bottom: 20rpx;
}

.date {
  font-size: 32rpx;
  color: #999;
}

.btn-group {
  display: flex;
  flex-direction: column;
}

.edit-logo {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 20rpx;
}
</style>    